import React from 'react';
import { Overlay, Button } from '@teamix/ui';
import './index.scss';
import { YunxiaoIcon } from '@alife/devops-ui';

const { Popup } = Overlay;

export default class Tag extends React.PureComponent {
  state = {
    showOverlay: false,
    tags: [],
  };

  static getDerivedStateFromProps(props) {
    if (props.tags) {
      return {
        tags: [...props.tags],
      };
    }
  }

  toggleOverlay = () => {
    const { showOverlay } = this.state;
    this.setState({
      showOverlay: !showOverlay,
    });
  };

  render() {
    const tags = [...this.state.tags];
    return (
      <React.Fragment>
        {tags.map((item, index) => {
          if (index < 3) {
            return <div className="no-branch-icon-overlay-tags">{item}</div>;
          }
          return null;
        })}
        {tags.length > 3 && (
          <Popup
            trigger={
              <Button text style={{ position: 'relative', bottom: -4, height: 36 }}>
                <YunxiaoIcon type="more-line" />
              </Button>
            }
            triggerType="click"
          >
            <div className="overlay-tags overlay-shadow no-branch-overlay">
              {tags.slice(3).map((item) => {
                return <div className="no-branch-icon-overlay-tags">{item}</div>;
              })}
            </div>
          </Popup>
        )}
      </React.Fragment>
    );
  }
}
// {tags.map((item) => {
//   return (
// <Text
//   style={{ maxWidth: 78 }}
//   ellipsis={{ tooltip: item }}
// >
//   {item}
// </Text>
//   );
// })}
